<template>
  <view class="tui-digital__roller">
    <view
      class="tui-digital__box"
      v-for="(item, index) in columns"
      :key="index"
      :style="{ width: cellWidth, height: height + 'px' }"
    >
      <view
        class="tui-digital__column"
        :style="{
          transform: `translate3d(0, -${keys[index] * height}px, 0)`,
          transitionDuration: `${duration}s`,
          transitionTimingFunction: animation,
        }"
      >
        <view
          class="tui-digital__item"
          v-for="(val, idx) in item"
          :key="idx"
          :style="{
            color: color,
            fontSize: size + 'rpx',
            fontWeight: bold ? 'bold' : 'normal',
            height: height + 'px',
            lineHeight: size + 'rpx',
          }"
        >
          {{ val }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'tuiDigitalRoller',
  props: {
    value: {
      type: [Number, String],
      default: '',
    },
    color: {
      type: String,
      default: '#5677fc',
    },
    //rpx
    size: {
      type: Number,
      default: 32,
    },
    bold: {
      type: Boolean,
      default: false,
    },
    //滚动行高度 rpx
    cellHeight: {
      type: Number,
      default: 32,
    },
    //单个数字宽度
    cellWidth: {
      type: String,
      default: 'auto',
    },
    // 动画过渡效果
    animation: {
      type: String,
      default: 'cubic-bezier(0, 1, 0, 1)',
    },
    //动画时间
    duration: {
      type: Number,
      default: 1.2,
    },
  },
  watch: {
    value(val) {
      this.initColumn(this.value);
    },
    cellHeight(val) {
      this.handleHeight(val);
    },
  },
  data() {
    return {
      columns: [],
      keys: [],
      height: 0,
    };
  },
  created() {
    this.handleHeight(this.cellHeight);
    this.initColumn(this.value);
  },
  methods: {
    handleHeight(h) {
      this.height = uni.upx2px(h || 0);
    },
    initColumn(val) {
      val = val + '';
      let digit = val.length,
        arr = [],
        rows = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
      for (let i = 0; i < digit; i++) {
        if (val[i] === '.' || val[i] === ',') {
          arr.push(val[i]);
        } else {
          arr.push(rows);
        }
      }
      this.columns = arr;
      this.roll(val);
    },
    roll(value) {
      let valueArr = value.toString().split(''),
        lengths = this.columns.length,
        indexs = [];

      while (valueArr.length) {
        let figure = valueArr.pop();
        if (figure === '.' || figure === ',') {
          indexs.unshift(0);
        } else {
          indexs.unshift(Number(figure));
        }
      }
      while (indexs.length < lengths) {
        indexs.unshift(0);
      }
      this.keys = indexs;
    },
  },
};
</script>

<style scoped>
.tui-digital__roller {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}

.tui-digital__box {
  overflow: hidden;
}

.tui-digital__column {
  transform: translate3d(0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.tui-digital__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
